import React, {useState} from 'react';
import { Tabs, Card } from 'antd';

import AuthComponent from '@/components/Authorized/AuthComponent';
import styles from './index.less';
import { useInViewport } from '@umijs/hooks';

import VipRoomRule from './components/vipRoomRule/index'
import VipRoomPrice from './components/vipRoomPrice'

const { TabPane } = Tabs;

export default () => {

  const [activeKey, setActiveKey] = useState('1');
  // 保存已经加载的tab-key，用于业务页面的缓存。
  const [loadedkey,setLoadedkey] = useState('1');
  // 用于重置缓存页面的tab选中状态
  const inViewPort = useInViewport(() => document.querySelector('#pageViewId'));
  
  return (
    <Card id="pageViewId" className={styles.charts}>
      <Tabs defaultActiveKey="1" onChange={(key)=>{
        setActiveKey(key);
        setLoadedkey(loadedkey+key);
        }}>
        <TabPane tab="贵宾室规则维护" key="1">
          {/* {activeKey === '1'? <VipRoomRule></VipRoomRule>: null} */}
          {loadedkey.indexOf('1') > -1 ? <VipRoomRule /> : null}
        </TabPane>
        <TabPane tab="贵宾室价格维护" key="2">
          {/* {activeKey === '2'? <VipRoomPrice></VipRoomPrice>: null} */}
          {loadedkey.indexOf('2') > -1 ? <VipRoomPrice /> : null}
        </TabPane>
      </Tabs>,
    </Card>
  );
};
